'use strict'

import React, { Component } from 'react'
import * as helper from '../../utilities/helper'
import * as layout from '../../configs/layout'
import * as color from '../../configs/color'
import noop from 'lodash/noop'

const style = {
    marginLeft: layout.HORIZONTAL_PADDING,
    marginRight: layout.HORIZONTAL_PADDING,
    height: '45px',
    textAlign: 'center',
    lineHeight: '45px',
    fontSize: '18px',
    borderRadius: '5px'
}

const themes = {
    primary: {
        backgroundColor: color.PRIMARY,
        color: color.WHITE
    },

    normal: {
        borderColor: '#ccccc5',
        borderWidth: '1px',
        borderStyle: 'solid',
        color: color.DARK
    },

    silent: {
        backgroundColor: color.SILENT,
        color: color.WHITE
    },

    outline: {
        borderColor: color.PRIMARY,
        borderWidth: '1px',
        borderStyle: 'solid',
        backgroundColor: color.WHITE,
        color: color.PRIMARY
    }
}

export default class FullButton extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div style={helper.combineStyles(style, themes, this.props.themes, this.props.style)} onClick={this.props.onClick}>
                {this.props.text}
            </div>
        )
    }
}

FullButton.defaultProps = {
    text: '点我',
    themes: 'primary',
    onClick: noop
}

FullButton.propTypes = {
    text: React.PropTypes.string.isRequired,
    themes: React.PropTypes.string,
    style: React.PropTypes.object,
    onClick: React.PropTypes.func.isRequired
}